﻿<!DOCTYPE html>
<html id="home" lang="en">

    <head>
        <title>WebRTC Desktop Viewer ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">
        <style>video {max-width: 100%;}</style>
        <script src="//cdn.webrtc-experiment.com/RTCMultiConnection-v2.1.9.js"> </script>
    </head>

    <body>
        <article>
            <header style="text-align: center;">
                <h1>
                    <a href="https://github.com/muaz-khan/Chrome-Extensions">WebRTC Desktop Viewer</a>
                </h1>
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>
            
            <div class="github-stargazers"></div>
            
            <blockquote class="inline">
                If URL is having "sessionid" parameters, it means that 
                a private unique room has been opened for you.<br><br>
                
                This page will be joining that unique room.<br>
                You can <a href="https://chrome.google.com/webstore/detail/webrtc-desktop-sharing/nkemblooioekjnpfekmjhpgkackcajhg">Install Chrome Extension</a>! It will allow you share your own screens as well!
            </blockquote>
		
            <div class="experiment" id="participants"></div>

            <script>
                (function () {
                    var params = {},
                        r = /([^&=]+)=?([^&]*)/g;

                    function d(s) {
                        return decodeURIComponent(s.replace(/\+/g, ' '));
                    }

                    var match, search = window.location.search;
                    while (match = r.exec(search.substring(1)))
                        params[d(match[1])] = d(match[2]);

                    window.params = params;
                })();
                
                // http://www.rtcmulticonnection.org/docs/constructor/
                var connection = new RTCMultiConnection(params.sessionid);

                // chrome extension API fails if b=AS in the sdp
                // http://www.rtcmulticonnection.org/docs/bandwidth/
                connection.bandwidth = {};
                
                var ol = document.createElement('ol');
                document.getElementById('participants').appendChild(ol);
                // http://www.rtcmulticonnection.org/docs/onstatechange/
                connection.onstatechange = function (stat) {
                    var li = document.createElement('li');
                    li.innerHTML = '<h2>' + stat.name + '</h2><p>' + stat.reason + '</p>';
                    ol.insertBefore(li, ol.firstChild);
                };
                
                connection.ondisconnected = function(event) {
                    var li = document.createElement('li');
                    li.innerHTML = '<h2>Peer Connection Disconnected</h2><p>Peer connection seems has been disconnected between you and ' + event.userid + '</p>';
                    ol.insertBefore(li, ol.firstChild);
                };
                
                var defaultOnFailed = connection.onfailed;
                connection.onfailed = function(event) {
                    var li = document.createElement('li');
                    li.innerHTML = '<h2>Peer Connection Disconnected</h2><p>ICE connectivity check is failed between you and ' + event.userid + '</p>';
                    ol.insertBefore(li, ol.firstChild);
                    
                    // default implementation auto redials or renegotiates
                    defaultOnFailed(event);
                };
                
                var logsOL = document.createElement('ol');
                document.getElementById('participants').appendChild(logsOL);
                // http://www.rtcmulticonnection.org/docs/#onlog
                connection.onlog = function (log) {
                    var li = document.createElement('li');
                    
                    // to handle messages like "Uncaught TypeError: Converting circular structure to JSON"
                    try {
                        log = JSON.stringify(log, null, '\r\r').replace(/\\r\\n/g, '<br />');
                    }
                    catch(e) {}
                    
                    li.innerHTML = log;
                    logsOL.insertBefore(li, logsOL.firstChild);
                };

                // using websockets as signaling medium
                // http://www.rtcmulticonnection.org/docs/openSignalingChannel/
                connection.openSignalingChannel = openSignalingChannel;

                // on successfully getting shared desktop
                var participants = document.getElementById('participants');
                
                // http://www.rtcmulticonnection.org/docs/onstream/
                connection.onstream = function (e) {
                    participants.insertBefore(e.mediaElement, participants.firstChild);
                };
                
                var sessionDescription = {
                    userid: params.sessionid,
                    extra: {},
                    session: {
                        video: true,
                        oneway: true
                    },
                    sessionid: params.sessionid
                };
                
                if(params.sessionid) {
                    // http://www.rtcmulticonnection.org/docs/join/
                    connection.join(sessionDescription);
                }

                // using websockets for signaling
                function openSignalingChannel(config) {
                    config.channel = config.channel || this.channel;
                    var websocket = new WebSocket('wss://wsnodejs.nodejitsu.com:443');
                    websocket.onopen = function () {
                        websocket.push(JSON.stringify({
                            open: true,
                            channel: config.channel
                        }));
                        if (config.callback) config.callback(websocket);
                    };
                    websocket.onerror = function() {
                        location.reload();
                    };
                    websocket.onmessage = function (event) {
                        config.onmessage(JSON.parse(event.data));
                    };
                    websocket.push = websocket.send;
                    websocket.send = function (data) {
                        websocket.push(JSON.stringify({
                            data: data,
                            channel: config.channel
                        }));
                    };
                }
            </script>
            
            <br /><br />
            <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
                <div>
                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button>
            </section>
            
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/desktop-sharing" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
        
        <!-- commits.js is useless for you! -->
        <script src="//cdn.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
